<template>

	<view class="page ">
		<view class="top-content">
			<view class="title-top">
				<view class="title1">
					我的积分
				</view>
				<view class="title2">
					{{state.obj.score}}
				</view>
			</view>
			<view class="sign" @tap="sign">
				签到
			</view>
			<view class="signinfo">
				<view class="title" style="color: #fff;">
					本周累计{{state.obj.weeknum}}天，每周一重制
				</view>
				<view class="list">
					<view class="line">

					</view>
					<view class="item" v-for="i in state.obj.data">
						<image :src="i.is_signin?'/static/qeed.png':'/static/noqd.png'" mode=""
							:style="i.is_signin?'transform: scale(1.5)':''"></image>
						<view class="title" :style="i.is_signin?'color:#fff':''">
							{{i.day}}
						</view>
					</view>
				</view>
			</view>


		</view>
		<view class="bot-content-wapper">
			<view class="bot-content">
				<u-tabs :list="list" lineWidth="28rpx" lineColor="#FC5652" :activeStyle="{
				               color: '#333',
				               fontWeight: '600',
				              
				           }" :inactiveStyle="{
				              color: '#333',
				              fontWeight: '300',
				              
				           }" :scrollable="false" itemStyle="padding-left: 15px; padding-right: 15px; width: 80%;height:88rpx;"
					@change="changetab"></u-tabs>

			</view>
			<view class="bot-content-1" style="background-color: #fff;position: relative;">
				<!-- 	<view class="top ss-flex">
					<view class="item">
						头像
					</view>
					<view class="item">
						会员id
					</view>
					<view class="item">
						时间
					</view>
					<view class="item">
						返还积分
					</view>
				</view> -->
				<view class="list" v-if="state.tabindex===0">
					<view class="way ss-flex">
						<image src="/static/fxxyh.png" class="icon" mode="" style="width: 70rpx;height: 70rpx;"></image>
						<view class="info">
							<view class="title">
								分享新用户注册
							</view>
							<view class="title1" >
								积分 <span>+50</span>
							</view>
						</view>
						<view class="lqbutton" @tap="LC.$router.go('/pages/user/share')">
							领取
						</view>
					</view>
				</view>
				<view class="list" v-if="state.tabindex===1">
					<u-empty v-if="state.datalist.length<1">
					</u-empty>
					<view class="list-item " v-for="item in state.datalist">
						<view class="ss-flex ss-row-between">
							<view class="lable">
								{{item.memo}}
							</view>
							<view class="amount">
								+{{item.amount}}
							</view>
						</view>

						<view class="time">
							{{item.createtime}}
						</view>

					</view>
				</view>
			</view>
		</view>
		<view class="fixed" v-show="state.showqrcode">
			<canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas>
			<u-button type="primary" text="保存" @tap="save" style="margin: 20rpx 0"></u-button>
			<u-button text="取消" @tap="state.showqrcode=false"></u-button>
		</view>


	</view>
</template>

<script setup>
	import LC from '@/LC';
	import UQRCode from '../../uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
	import {
		computed,
		reactive,
		ref,
		onMounted,
		getCurrentInstance,
		nextTick
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'
	let list = [{
		name: '积分任务'
	}, {
		name: '积分明细'
	}]
	let appinfo = computed(() => LC.$store('app').info)
	let info = computed(() => LC.$store('user').info)
	let state = reactive({
		pageData: {
			page: 1,
			limit:15,
			status: 'loading'
		},
		showqrcode: false,
		keyword: '',
		tabindex: 0,
		obj: {
			data: []
		},
		datalist: []
	})

	function back() {
		LC.$router.back()
	}

	onLoad(() => {
		LC.$api.user.signininfo()
			.then((res) => {

				state.obj = res.data
			

			})



		getlist()
	})

	function openshare() {
		state.showqrcode = true
		setTimeout(() => {
			var qr = new UQRCode();
			// 设置二维码内容
			qr.data = "https://uqrcode.cn/doc?id=" + info.value.code;
			// 设置二维码大小，必须与canvas设置的宽高一致
			qr.size = 200;
			// 调用制作二维码方法
			qr.make();
			// 获取canvas上下文
			var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
			// 设置uQRCode实例的canvas上下文
			qr.canvasContext = canvasContext;
			// 调用绘制方法将二维码图案绘制到canvas上
			qr.drawCanvas();
		}, 300)
		// 获取uQRCode实例


	}

	function sign() {

		LC.$api.user.signin({


			})
			.then((res) => {
				if (res.code === 1) {
					LC.$api.user.signininfo()
						.then((res) => {

							state.obj = res.data
							console.log(state.obj)

						})
					LC.$store('user').userinfo()
				}
			})
	}

	function save() {
		uni.canvasToTempFilePath({
				canvasId: 'qrcode',
				fileType: 'png',
				width: 200,
				height: 200,
				success: ({
					tempFilePath
				}) => {
					// #ifdef H5
					const aEle = document.createElement('a');
					aEle.download = 'uQRCode'; // 设置下载的文件名，默认是'下载'
					aEle.href = tempFilePath;

					aEle.click();
					aEle.remove(); //
					// #endif
					// #ifdef APP
					uni.saveImageToPhotosAlbum({
						filePath: tempFilePath,
						success: res => {
							console.log(res);
						},
						fail: err => {
							console.log(err);
						}
					});
					// #endif



				},
				fail: err => {
					console.log(err);
				}
			},
			// this // 组件内使用必传当前实例
		);
	}

	function getlist() {

		LC.$api.user.scorelog({
				...state.pageData,

			})
			.then(({
				res,
				data
			}) => {


				state.datalist = [...state.datalist, ...data.data]

				if (data.data.length < state.pageData.limit) {
					state.pageData.status = 'nomore'
					return
				}


				state.pageData.status = 'loadmore'
				state.pageData.page += 1

			})

	}
	onReachBottom(() => {
		onbottom()
	})



	function onbottom() {

		let {
			status,
			load,
			limit,
			page
		} = state.pageData

		if (status != 'nomore' && !load) {

			getlist()


		}
	}

	function copy(a) {
		if (a) {
			uni.setClipboardData({
				data: a, //当前点击的地址
				success: () => {
					uni.showToast({
						title: '已复制',
						icon: "none"
					})
				}
			});
		}
	}
	function changetab({index}){
		state.tabindex=index
	}
</script>

<style lang="scss">
	.way {
		.lqbutton {
			margin-left: auto;
			width: 140rpx;
			    height: 60rpx;
			    background: linear-gradient(0deg, #fd4e27, #ff7c35);
			    box-shadow: 0px 4rpx 10rpx 0px rgba(253, 82, 40, .5);
			    border-radius: 30rpx;
			    color: #fff;
			    font-size: 26rpx;
			    font-weight: 400;
			    text-align: center;
			    line-height: 60rpx;
			    margin-top: 14rpx;
		}
		justify-content: flex-start;
		.info{
			margin-left: 30rpx;
			.title{
				    font-size: 32rpx;
				    font-weight: 600;
				    color: #333;
			}
			.title1{
				padding-top: 6rpx;
				    font-size: 26rpx;
				    font-weight: 500;
				    color: #8e91a7;
					span{
						color: #ff7c35;
					}
			}
		}
		
		margin: 0 30rpx;
		padding: 24rpx;
		height: 88rpx;
		background: #f6f7ff;
		display: flex;
		
		margin-bottom: 26rpx;
	}

	.signinfo {
		margin-top: 60rpx;

		>.title {
			font-size: 28rpx;
			font-weight: 400;
			color: #fff;
			opacity: .88;
			margin-left: 30rpx;
			margin-bottom: 20rpx;
		}

		.list {
			display: flex;
			width: 690rpx;
			margin: 0 auto;
			margin-top: 60rpx;
			justify-content: space-between;

			.item {
				.title {
					font-size: 28rpx;
					font-weight: 700;
					color: #ffeba1;
				}


				image {
					width: 28rpx;
					height: 28rpx;
					text-align: center;
					border: 10rpx solid #FC5652;
					border-radius: 50%;
				}
			}
		}
	}

	.title-top {
		margin-left: 40rpx;

		.title1 {
			font-size: 28rpx;
			font-weight: 600;
			color: #fff;
			line-height: 52rpx;
		}

		.title2 {
			line-height: 110rpx;
			font-size: 80rpx;
			font-weight: 700;
			color: #fff;
		}
	}

	.sign {
		margin-left: 30rpx;
		margin-top: 30rpx;
		width: 204rpx;
		text-align: center;
		height: 80rpx;
		background: linear-gradient(0deg, #f5a300, #fccb54 99%);
		border: 6rpx solid hsla(0, 0%, 100%, .2);
		box-shadow: 0px 4rpx 10rpx 0px rgba(254, 103, 47, 1.0);
		border-radius: 50rpx;
		line-height: 80rpx;
		font-size: 44rpx;
		font-weight: 600;
		color: #fff;
		text-shadow: 0px 2rpx 2rpx rgba(0, 0, 0, .5);
	}

	.fixed {
		position: fixed;
		top: 280rpx;
		left: 50vw;
		z-index: 22222;
		transform: translateX(-50%);
		background-color: #EAEAEA;
		padding: 50rpx 40rpx;
	}

	.bot-content {
		width: 690rpx;
		height: 88rpx;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		margin: -100rpx 30rpx 0 30rpx;
		position: relative;
		z-index: 2;
		display: flex;
		justify-content: space-around;
		line-height: 88rpx;


	}

	.bot-content-1 {
		margin: 0 30rpx;

		.avatar {
			width: 80rpx;
			height: 80rpx;
		}

		.top,
		.list-item {
			margin: 0 40rpx;

			padding: 30rpx;
			height: 80rpx;

			border-bottom: 2rpx solid #ccc;
			font-size: 28rpx;
			font-weight: 500;
			color: #000;

			.label {}

			.amount {
				font-size: 38rpx;
				font-weight: 700;
				color: #FC5652;
			}

			.time {
				margin-top: 10rpx;
				font-size: 24rpx;
			}
		}
	}

	.status-bar {
		height: var(--status-bar-height);
	}


	.top-content {
		background: url(/static/qdbg.jpg);
		height: 722rpx;
		background-size: 100% 100%;
		position: relative;

		.gz {
			width: 156rpx;
			height: 60rpx;
			background: #fc7460;
			border-top-left-radius: 30rpx;
			border-bottom-left-radius: 30rpx;
			font-size: 26rpx;
			font-weight: 600;
			color: #fff;
			text-align: center;
			line-height: 60rpx;
			position: absolute;
			right: 0;
			top: 30rpx;
			z-index: 1;
		}

		.button {
			width: 240rpx;
			height: 78rpx;
			background: linear-gradient(0deg, #e9af6f, #fde6ca);
			border-radius: 40rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #5a3b1a;
			line-height: 78rpx;
			text-align: center;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 120rpx;
		}

		.invite-box1-1 {
			position: absolute;
			font-size: 26rpx;
			font-weight: 400;
			color: #ec5c37;
			line-height: 60rpx;

			top: 280rpx;
			left: 240rpx;
			width: 290rpx;
			z-index: 2;

			&-two {
				text-align: center;
				font-size: 28rpx;
				font-weight: 400;
				color: #ec5c37;
				line-height: 60px;

				text {
					font-size: 68rpx;
					font-weight: 700;
					color: #fa2b28;
					padding: 0 10rpx;

				}
			}
		}
	}

	.title {

		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 38rpx;
		color: #333333;
		line-height: 53rpx;
		position: relative;

	}

	.title1 {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 23rpx;
		color: #FC5652;
		// margin-top: 23rpx;

		image {
			width: 25rpx;
			height: 14rpx;
		}
	}

	.image {
		display: flex;

		width: 613rpx;
		margin: 0 auto;
		margin-top: 99rpx;
		margin-bottom: 137rpx;
		height: 613rpx;
	}

	.data-content {
		border-radius: 19px;
		border: 2rpx solid #EAEAEA;
		padding: 0 21rpx;

		.item {
			padding: 25rpx 0;

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 27rpx;
				color: #333333;
				line-height: 38rpx;
			}

			.link {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 27rpx;
				margin-left: auto;
				color: #333333;
				line-height: 38rpx;
			}

			image {
				margin-left: 25rpx;
				width: 53rpx;
				height: 53rpx;
			}
		}
	}

	.top_icon {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 31rpx;
		color: #333333;
		line-height: 42rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.page {}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>